<template>
  <div class="container">
    <div class="banner">
      <img v-lazy="pageImgObject.pic01" alt="">
      <span id="share" @click="shareForWechat"><img src="../../../assets/img/publicImg/share_white.png" alt=""></span>
    </div>
    <!-- 国潮集合 -->
    <div class="gc-module" ref="gcModule">
      <div class="tab">
        <img v-lazy="pageImgObject.pic02" alt="">
        <div class="tab01" @click="scrollToNode(0)"></div>
        <div class="tab02" @click="scrollToNode(1)"></div>
      </div>
      <div class="price-box">
        <img v-lazy="pageImgObject.pic03" alt="">
        <div class="goods-price" v-for="(item,index) in pageGoodsForGc.slice(0,2)" :key="'price'+index" @click="goForGoodsDetail(item.goods_id)">
          <span>{{item.flash_price}}</span>
        </div>
      </div>
      <div><img v-lazy="pageImgObject.pic04" alt=""></div>
      <div class="wrapper">
        <div class="scroll-box" :style="{width:2.12*7+'rem'}">
          <ScrollItem :parentData="item" :styleData="childStyle" @childEvent="goForGoodsDetail" v-for="(item,index) in pageGoodsForGc.slice(2)" :key="index"/>
        </div>
      </div>
    </div>
    <!-- 大牌直降 -->
    <div class="zj-module" ref="zjModule">
      <div><img v-lazy="pageImgObject.pic05" alt=""></div>
       <div class="wrapper">
        <SelfItem :parentData="item" :styleData="{}" :type="1" @childEvent="goForGoodsDetail" v-for="(item,index) in pageGoodsForZj[0]" :key="index"/>
      </div>
      <div><img v-lazy="pageImgObject.pic06" alt=""></div>
       <div class="wrapper">
        <SelfItem :parentData="item" :styleData="{}" :type="2" @childEvent="goForGoodsDetail" v-for="(item,index) in pageGoodsForZj[1]" :key="index"/>
      </div>
    </div>
    <div class="more" v-if="moreData.specialArrList.length">
      <div><img v-lazy="pageImgObject.pic07" alt=""></div>
      <div class="wrapper">
        <special-item :parentData="item" @childEvent="goForSpecialDetail" v-for="(item,index) in moreData.specialArrList" :key="index"/>
      </div>
    </div>
  </div>
</template>

<script>
  import SelfItem from './self.vue'
  import ScrollItem from 'components/GoodsItems/scrollItem.vue'
  import SpecialItem from 'components/GoodsItems/specialItem.vue'
  import MaskModal from 'components/maskDown/index.js'
  import { getGoodsListApi, handleMoreApi } from "@/apis/publicApi.js";
  export default {
    components:{ ScrollItem, SpecialItem, SelfItem },
    data(){
      return{
        pageImgObject:{},
        pageImgArray:[],
        bgColorArray:[],
        childStyle:{width:'2rem'},
        pageGoodsIds:[
          1609815,1609811,
          1609785,1613741,1613739,1613737,1609817,1609793,1609821,1609803,1609809,1609819,1609813,1609805,1609197,1609807,
          1609801,1609799,1609797,1609199,1609791,1609839,1609059,1609061,1609063,1609065,1609067,1609069,1609071,1609073,
          1609875,1609775,1609879,1609777,1609779,1609781,1609783,1609787,1609789,1609877,1609795,1609873,
          1609185,1609179,1609169,1609177,1609171,1609181,1609183,1609173,1613425,1609187,1609189,1609191
        ],
        pageGoodsForGc:[],//国朝集合
        pageGoodsForZj:[],//大牌直降
        moreData:{
          reqestIds:'72351,72439,72325,69453,72361,71425,72451,72433,72375,72435,71783,71901,72555,72503,72521,72457,72337,72447,72301,70641,72303,72467,72529,72553,72559,72495,72571,72533,72631,72627,72145',
          specialArrList:[]
        },
        requestLock:false,//请求锁用于上啦加载
        totalPage:2,//分页总数
        currentPage:1,//默认第一页
      } 
    },
    created(){
      if( this.shareJudge('isshare') ){ MaskModal(); }
      this.pageImgObjectFunc();
      let firstReqIds=this.pageGoodsIds.slice(0,30).toString();
      this.getGoodsAction(firstReqIds);
    },
    mounted(){
      let that=this;
      window.addEventListener('scroll',function(){
        if (!that.requestLock) {
          that.requestLock=true;//添加锁定
          let secondReqIds=that.pageGoodsIds.slice(30).toString();
          that.getGoodsAction(secondReqIds);//请求数据
        }
      },false);
      that.moreSpecial();
    },
    methods:{
      pageImgObjectFunc(){
        this.pageImgObject={
          pic01:require('../../../assets/img/fashionSummer/clsummer01.jpg'),
          pic02:require('../../../assets/img/fashionSummer/clsummer02.jpg'),
          pic03:require('../../../assets/img/fashionSummer/clsummer03.jpg'),
          pic04:require('../../../assets/img/fashionSummer/clsummer04.jpg'),
          pic05:require('../../../assets/img/fashionSummer/clsummer05.jpg'),
          pic06:require('../../../assets/img/fashionSummer/clsummer06.jpg'),
          pic07:require('../../../assets/img/fashionSummer/clsummer07.jpg')
        };
      },
      goForGoodsDetail(id){
        this.$navtiveUtils.jump2goods(id);
      },
      goForSpecialDetail(id){
        this.$navtiveUtils.jump2special(id);
      },
      getGoodsAction(list){
        if(this.currentPage>this.totalPage){ return false }
        getGoodsListApi(list).then(res =>{
          if(res.code==200 && res.status=='success'){
            if(this.currentPage==2){
              let limitTop = 2,perPageNum=12,tempData=[];
              for (let index = 0; index < limitTop; index++) {
                let element = res.data.slice(index*perPageNum,(index+1)*perPageNum);
                tempData.push(element);
              }
              this.pageGoodsForZj=this.pageGoodsForZj.concat(tempData);
            }else{
              this.pageGoodsForGc=res.data;
            }
            this.currentPage++;//分页数+1
            this.requestLock=false;//解除锁定
          }
        });
      },
      moreSpecial() {
        handleMoreApi(this.moreData.reqestIds).then(res => {
          this.moreData.specialArrList = res.data;
        });
      },
      shareJudge(e) {
        let temp = window.location.search.replace("?", "").split("&");
        let isFlag = false;
        for (let index = 0; index < temp.length; index++) {
          isFlag += temp[index].split("=").indexOf(e)>-1;
        }
        return isFlag;
      },
      shareForWechat() {
        let that = this;
        let pageTitle=document.title ;
        setTimeout(function() {
          that.$navtiveUtils.share(pageTitle, "潮流精选好货，限时折扣中，快来抢购！","");
        }, 300);
      },
      scrollToNode(val){
        let top= val ? this.$refs.zjModule.offsetTop:this.$refs.gcModule.offsetTop;
        window.scrollTo({ top: top, behavior: "smooth" });
      }
    }
  }
</script>
<style lang="less">
html,body{
  padding-bottom: 0.2rem;
  background-image: url('../../../assets/img/fashionSummer/clsummer11.jpg');
  background-repeat: repeat-y;
  background-size: contain;
}
.vux-toast,.weui-toast {
  font-size: .32rem;
  line-height: 0.4rem;
}
</style>

<style lang="less" scoped>
.banner{
  position: relative;
  #share{
    width: 0.75rem;
    height: 0.75rem;
    text-align: center;
    position: absolute;
    top: 0.1rem;
    right: 0.1rem;
  }
}
.gc-module{
  .tab{
    height: 3.82rem;
    position: relative;
    &>div{
      width:3.2rem;
      height: 0.6rem;
      position: absolute;
      top: 0.65rem;left: 0.55rem;
    }
    .tab02{left: 50%}
  }
  .price-box{
    position: relative;
    .goods-price{
      width: 6.35rem;
      height: 50%;
      color: #A40A00;
      position: absolute;
      top: 0rem;left: 0.55rem;
      font-size: 0.4rem;
      font-weight: 600;
      &:nth-child(3){
        top: 50%;
        span{
          top: 1.32rem;
          left: 4.9rem;
        }
      }
      &>span{
        position: absolute;
        top: 1.37rem;
        left: 4.8rem;
      }
    }
  }
  .wrapper{
    width:6.85rem;
    margin: 0 0.32rem;
    background: #A92230;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar{width: 0;height: 0}
    .scroll-box{
      display: flex;
      flex-wrap: wrap;
      padding-left: 0.1rem;
      padding-bottom: 0.2rem;
      .goods{
        margin-bottom: 0.1rem;
      }
    }
  }
}
.zj-module{
  .wrapper{
    display: flex;
    flex-wrap: wrap;
    padding: 0.24rem;
    margin: 0 0.32rem;
    background-image: url('../../../assets/img/fashionSummer/clsummer12.jpg');
    background-repeat: repeat-y;
    background-size: contain;
    .goods{
      margin-bottom: 0.1rem;
      &:nth-child(2n){
        margin-right: 0;
      }
    }
  }
}
.more{
  margin: 0 0.32rem;
  padding: 0.2rem;
  background-image: url('../../../assets/img/fashionSummer/clsummer12.jpg');
  background-repeat: repeat-y;
  background-size: contain;
  .special{
    margin-bottom: 0.1rem;
  }
}
</style>